<template>
  <div>
    <el-dialog
      title="组织范围维护"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      center
      width="750px"
      @close="dialogClose"
    >
      <div v-loading="loading" style="width: 650px;margin-left: 30px;">
        <div class="selected-project-header">
          <div><span>用户：</span><span>{{ user.userName }}</span></div>
          <el-input
            v-model="searchParams.deptCode"
            placeholder="组织编码"
            clearable
            size="mini"
            prefix-icon="el-icon-search"
            style="width: 160px"
            @input="paramsInput"
          />
          <el-input
            v-model="searchParams.deptName"
            placeholder="组织名称"
            clearable
            size="mini"
            prefix-icon="el-icon-search"
            style="width: 160px"
            @input="paramsInput"
          />
          <el-button
            size="mini"
            icon="el-icon-plus"
            type="primary"
            @click="addOrganization"
          >新增
          </el-button>
        </div>
        <el-table :data="organizationList" size="mini" height="70vh">
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column property="deptCode" label="组织编码" width="200" align="center" />
          <el-table-column property="deptName" label="组织名称" width="200" align="center" />
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog
      style="margin-top: 30px;"
      title="选择部门"
      :visible.sync="showOrganization"
      :close-on-click-modal="false"
      center
      width="570px"
      @close="innerDialogClose"
    >
      <div style="width: 460px;margin-left: 30px;">
        <select-organization-tree ref="selectOrganizationRef" v-loading="loading" :dept-options="deptOptions" :user="user" @success="success" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { authlist, delUserAuthDept } from '@/api/system/user'
import SelectOrganizationTree from './SelectOrganizationTree'
export default {
  name: 'OrganizationAuthorization',
  components: { SelectOrganizationTree },
  props: {
    user: {
      type: Object,
      default: () => {}
    },
    deptOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      organizationList: [],
      originalList: [], // 全部列表数据
      isEmpty: false,
      loading: false,
      showOrganization: false,
      searchParams: {
        deptName: '',
        deptCode: ''
      }
    }
  },
  watch: {
    user() {
      this.getOrganizations()
    }
  },
  created() { // 初始化
    this.getOrganizations()
  },
  methods: {
    paramsInput() {
      this.organizationList = this.originalList.filter(org => org.deptName.indexOf(this.searchParams.deptName) !== -1 && org.deptCode.indexOf(this.searchParams.deptCode) !== -1)
    },
    dialogClose() {
      this.organizationList = []
      this.searchParams.deptName = ''
      this.searchParams.deptCode = ''
    },
    handleDelete(row) {
      this.loading = true
      delUserAuthDept({ userFid: this.user.fid, dpetFid: row.fid }).then(
        (response) => {
          if (response.code === 200) {
            this.getOrganizations()
          }
        }
      ).finally(() => {
        this.loading = false
      })
      // this.organizationList = this.organizationList.filter(pro => pro.fid !== row.fid)
    },
    addOrganization() {
      this.showOrganization = true
    },
    innerDialogClose() {
      this.$refs.selectOrganizationRef.setCheckedKeys()
    },
    success() {
      this.showOrganization = false
      this.getOrganizations()
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    },
    getOrganizations() {
      if (this.user.fid === undefined) return
      this.loading = true
      authlist({ userFid: this.user.fid }).then(
        (response) => {
          if (response.code === 200) {
            this.organizationList = response.data
            this.originalList = [...response.data]
            this.loading = false
          }
        }
      ).finally(() => {

      })
    }
  }
}
</script>

<style scoped lang='scss'>
.selected-project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 20px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
}
</style>
